<template>
	<div class="login">
		<div class="box">
			<div class="title">{{ title }}</div>
			<el-form ref="loginForm"
					 :model="loginData"
					 :rules="rules"
					 label-width="70px">
				<el-form-item label="用户名:"
							  prop="username">
					<el-input v-model="loginData.username"
							  @keyup.enter.native="login"
							  size="small"></el-input>
				</el-form-item>
				<el-form-item label="密码:"
							  prop="password">
					<el-input :type="type"
							  v-model="loginData.password"
							  @keyup.enter.native="login"
							  size="small">
						<i slot="suffix"
						   style="margin-right: 5px;cursor: pointer;"
						   @click="showPass"
						   class="el-icon-view"></i>
					</el-input>
				</el-form-item>
				<el-form-item label="验证码:"
							  prop="captcha">
					<el-input v-model="loginData.captcha"
							  style="width: 160px"
							  @keyup.enter.native="login"
							  size="small"></el-input>
					<span class="captcha"
						  v-html="captcha"
						  @click="getCaptcha"></span>
				</el-form-item>
				<el-form-item>
					<el-checkbox v-model="loginData.type">记住密码</el-checkbox>
				</el-form-item>
				<el-button type="primary"
						   style="width: 100%"
						   size="small"
						   @click="login">登录
				</el-button>
			</el-form>
		</div>
	</div>
</template>

<script>
import Cookies from 'js-cookie'
import { loginApi } from '@/api'
import { getUUID, getRoute } from '@/utils'

export default {
	name: 'login',
	data () {
		return {
			title:process.env.VUE_APP_TITLE,
			type: 'password',
			captcha: '',
			loginData: {
				username: '',
				password: '',
				captcha: '',
				type: false
			},
			rules: {
				username: [
					{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				],
				captcha: [
					{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}
				]
			}
		}
	},
	created () {
		this.init()
		this.getCaptcha()
	},
	mounted () {
		this.$refs.loginForm.resetFields()
	},
	methods: {
		async getCaptcha () {
			let params = {
				text: getUUID()
			}
			const { err, data } = await loginApi.captcha(params)
			if (err) {
				return false
			}
			this.captcha = data
		},
		init () {
			let info = Cookies.get('userInfo')
			if (info) {
				let obj = JSON.parse(info)
				this.loginData.username = obj.username
				this.loginData.password = obj.password
				this.loginData.type = obj.type
			}
		},
		// 登录提交表单
		login () {
			this.$refs['loginForm'].validate(async (valid) => {
				if (valid) {
					let params = Object.assign({}, this.loginData)
					const { err, data } = await loginApi.login(params)
					if (err) {
						this.getCaptcha()
						return false
					}
					Cookies.set('token', data)
					// 记住密码
					if (this.loginData.type) {
						let obj = {
							username: this.loginData.username,
							password: this.loginData.password,
							type: this.loginData.type
						}
						let cookie = JSON.stringify(obj)
						Cookies.set('userInfo', cookie)
					} else {
						Cookies.remove('userInfo')
					}
					getRoute()
					this.$router.push({ path: '/home' })
				} else {
					return false
				}
			})
		},
		// 显示密码
		showPass () {
			if (this.type === 'password') {
				this.type = 'text'
			} else {
				this.type = 'password'
			}
		}
	}
}
</script>
<style lang="less" scoped>
.login {
	width: 100%;
	height: 100vh;
	background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F013bdb59621024a8012193a34ed94d.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637762847&t=daac2ef8729531db736c7997301803f5');

	.box {
		width: 350px;
		padding: 30px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 10px;

		.title {
			font-size: 20px;
			color: #666;
			margin-bottom: 20px;
			text-align: center;
		}
	}

	.captcha {
		margin-top: 5px;
		float: right;

		svg {
			width: 100px;
		}
	}
}
</style>
